<script setup>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElIcon, ElNotification, ElDatePicker } from 'element-plus'
import { Plus, Close, Reading, User, Clock } from '@element-plus/icons-vue'

// 表单数据
const formData = ref({
  name: '',
  code: '',
  category: '',
  teacher: '',
  credit: '',
  startTime: '',
  endTime: '',
  status: ''
})

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  code: [{ required: true, message: '请输入课程代码', trigger: 'blur' }],
  category: [{ required: true, message: '请选择课程分类', trigger: 'change' }],
  teacher: [{ required: true, message: '请输入教师姓名', trigger: 'blur' }],
  credit: [
    { required: true, message: '请输入学分', trigger: 'blur' },
    { type: 'number', message: '学分必须是数字', trigger: 'blur' },
    { min: 1, max: 10, message: '学分必须在1-10之间', trigger: 'blur' }
  ],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择课程状态', trigger: 'change' }]
}

// 课程分类选项
const categoryOptions = ref([
  { value: '必修课', label: '必修课' },
  { value: '选修课', label: '选修课' },
  { value: '通识课', label: '通识课' },
  { value: '专业课', label: '专业课' }
])

// 课程状态选项
const statusOptions = ref([
  { value: '未开始', label: '未开始' },
  { value: '进行中', label: '进行中' },
  { value: '已结束', label: '已结束' }
])

// 教师列表
const teacherOptions = ref([
  { value: '张老师', label: '张老师' },
  { value: '李老师', label: '李老师' },
  { value: '王老师', label: '王老师' },
  { value: '赵老师', label: '赵老师' },
  { value: '刘老师', label: '刘老师' }
])

// 提交表单
const submitForm = async () => {
  try {
    // 模拟API请求
    await new Promise(resolve => setTimeout(resolve, 500))
    ElNotification.success('课程添加成功')
    // 重置表单
    formData.value = {
      name: '',
      code: '',
      category: '',
      teacher: '',
      credit: '',
      startTime: '',
      endTime: '',
      status: ''
    }
  } catch (error) {
    ElNotification.error('课程添加失败')
    console.error('Failed to add course:', error)
  }
}
</script>

<template>
  <div class="add-course-container">
    <div class="header">
      <h2>新增课程</h2>
    </div>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      class="add-course-form"
    >
      <el-form-item label="课程名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入课程名称" />
      </el-form-item>
      <el-form-item label="课程代码" prop="code">
        <el-input v-model="formData.code" placeholder="请输入课程代码" />
      </el-form-item>
      <el-form-item label="课程分类" prop="category">
        <el-select v-model="formData.category" placeholder="请选择课程分类">
          <el-option v-for="option in categoryOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="教师" prop="teacher">
        <el-select v-model="formData.teacher" placeholder="请选择教师">
          <el-option v-for="option in teacherOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学分" prop="credit">
        <el-input v-model.number="formData.credit" type="number" placeholder="请输入学分" />
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker v-model="formData.startTime" type="date" placeholder="请选择开始时间" />
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="formData.endTime" type="date" placeholder="请选择结束时间" />
      </el-form-item>
      <el-form-item label="课程状态" prop="status">
        <el-select v-model="formData.status" placeholder="请选择课程状态">
          <el-option v-for="option in statusOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <div class="form-buttons">
          <el-button type="primary" @click="submitForm">
            <el-icon><Plus /></el-icon> 保存
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Close /></el-icon> 重置
          </el-button>
          <el-button @click="goBack">返回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.add-course-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.add-course-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
</style>